<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-warn"></i>&nbsp;&nbsp;一个管理员可以有多个角色组,左侧的菜单根据管理员所拥有的权限进行生成</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="table_btn">
                <el-button  icon="el-icon-refresh" >刷新</el-button>
                <el-button type="danger" icon="el-icon-delete"  @click="allDelete()">批量删除</el-button>
            </div>
            <div class="box_table">
                <el-table
                        :data="tableData"
                        border
                        @selection-change="handleSelectionChange"
                        style="width: 100%">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="id"
                            label="序号"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="user"
                            label="用户名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="operation"
                            label="操作"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="url"
                            label="Url">
                    </el-table-column>
                    <el-table-column
                            prop="IP"
                            label="IP">
                    </el-table-column>
                    <el-table-column
                            prop="action_time"
                            label="操作时间">
                    </el-table-column>
                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    icon="el-icon-edit"
                                    type="primary"
                                    @click="handleEdit(scope.$index, scope.row)">
                                编辑
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    icon="el-icon-delete"
                                    @click="handleDelete(scope.$index, scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    import axios from "axios";
    export default {
        data() {
            return {
                tableData: [{
                    id:'1',
                    user: 'admin',
                    operation: '登录',
                    url: '/login',
                    IP: '127.0.0.1',
                    action_time: '2020-01-02 09:29:04',
                },{
                    id:'2',
                    user: 'admin',
                    operation: '添加管理员',
                    url: '/auth/adminlog',
                    IP: '127.0.0.1',
                    action_time: '2020-01-02 09:29:04',
                },{
                    id:'3',
                    user: 'admin',
                    operation: '修改密码',
                    url: '/auth/adminlog',
                    IP: '127.0.0.1',
                    action_time: '2020-01-02 09:29:04',
                }],
                multipleSelection:[],
                query: {
                    address: '',
                    name: '',
                    pageIndex: 1,
                    pageSize: 10
                },
                pageTotal: 3,
            }

        },
        mounted(){


        },
        methods: {
            handleSelectionChange(val) {
                console.log(val);
                this.multipleSelection = val;
            },
            allDelete(){//批量删除
                if(this.multipleSelection.length<1){
                    this.$message.error('选择要删除的内容');
                    return ;
                }
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageIndex', val);
            }
        }

    }
</script>
<style>
</style>
